<template>
  <div class="shouquanneirong1">
      <p>
          4.1 乙方应向甲方支付一次性授权费用人民币
          <span class="editable" contenteditable="true" @input="updatePlatform">{{ work.authorization_fee }}</span>
          元（大写：<span>{{ chineseAmount }}</span>元整），作为获得本协议项下改编权和拍摄权的对价。
      </p>
      <p>
          4.2 乙方应在本协议签署后
          <span class="editable" contenteditable="true" @input="updateDays"></span>
          日内，以
          <span class="editable" contenteditable="true" @input="updatePaymentMethod"></span>
          （银行转账、支付宝、微信等）方式全额支付上述费用至甲方指定账户。
      </p>
  </div>
</template>

<script lang="ts" setup>
import { ref, defineEmits , onMounted, inject ,computed } from 'vue';
import { useRoute } from 'vue-router';
import { useStore } from 'vuex';
const axios = inject('axios'); // 注入 axios
// 获取路由信息
const route = useRoute();
const store = useStore();
// 计算属性从 Vuex 获取授权内容
const authorization = computed(() => store.getters.getAuthorization);

//更新授权费用
const updatePlatform = (event: InputEvent) => {
  const newValue = (event.target as HTMLElement).innerText;
  console.log("更新授权费用:", newValue);
  store.dispatch('setAuthorization', {authorization_fee: newValue,platform: authorization.value.platform, age_limit:authorization.value.age_limit,time: authorization.value.time});
  // 这里可以添加逻辑来根据授权费用更新中文金额
};
// 定义 props
const props = defineProps({
  work: {
      type: Object,
      required: true
  },
  hetong: {
      type: Object,
      required: true
  },
  user: {
      type: Object,
      required: true
  }
});

// 定义变量
const chineseAmount = ref(''); // 中文金额占位，您可以实现一个转换函数来填充这个值

// 更新授权费用
const updateAuthorizationFee = (event) => {
  props.work.authorization_fee = event.target.innerText.trim(); // 更新授权费用
  // 这里可以添加逻辑来根据授权费用更新中文金额
};

// 更新天数
const updateDays = (event) => {
  // 可以保存或处理天数
  console.log("更新天数:", event.target.innerText.trim());
};

// 更新支付方式
const updatePaymentMethod = (event) => {
  // 可以保存或处理支付方式
  console.log("更新支付方式:", event.target.innerText.trim());
};
</script>

<style scoped>
.editable {
  display: inline-block;
  position: relative; /* 需要进行相对定位，以支持伪元素 */
  min-width: 30px; /* 设置最小宽度以防止元素过于狭窄 */
  cursor: text; /* 文本输入光标 */
  text-align: center; /* 水平居中 */
  padding: 0 10px; /* 给左右添加一些填充，以保持左右两边的下划线 */
}

/* 创建下划线效果 */
.editable::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0; /* 右侧扩展至父元素的右边缘 */
  bottom: 0; /* 确保下划线在文本底部 */
  border-bottom: 1px solid black; /* 下划线样式 */
  pointer-events: none; /* 让下划线不影响文本输入 */
}

.editable:focus {
  outline: none; /* 去掉聚焦时的边框 */
}
</style>
